<!--
import { useFileTransStore } from '@/stores/fileTransStore'; // 使用 Pinia Store
import type { MindElixirData } from 'mind-elixir';
import MindElixir from 'mind-elixir';
import { computed, onMounted } from 'vue';
 * @FilePath: \ilink-vue-frontend\src\views\Square\LearningSquare\Lesson\video\components\MindMap.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { useFileTransStore } from '@/stores/fileTransStore'; // 使用 Pinia Store
import type { MindElixirData } from 'mind-elixir';
import MindElixir from 'mind-elixir';
import { storeToRefs } from 'pinia';
import { computed, onMounted } from 'vue';
// 从 Pinia Store 中获取 summarization 数据
const fileTransStore = useFileTransStore();
const { summarization } = storeToRefs(fileTransStore);

// 计算 MindMapSummary 的第一个项
const mindMapSummary = computed(() => summarization.value?.MindMapSummary?.[0]);

// 将节点转换为 MindElixirData 格式
const convertToMindElixirData = (node: any): any => {
  if (!node || !node.Title)
    return null;
  return {
    topic: node.Title,
    children: node.Topic?.map(convertToMindElixirData).filter(Boolean) || [],
  };
};

onMounted(() => {
  if (!mindMapSummary.value)
    return; // 如果没有数据，直接返回

  const mindData: MindElixirData = {
    nodeData: {
      id: 'root',
      topic: mindMapSummary.value.Title,
      children: mindMapSummary.value.Topic.map(convertToMindElixirData).filter(Boolean),
    },
  };

  // 初始化 MindElixir 脑图
  const mind = new MindElixir({
    el: '#map',
    direction: MindElixir.RIGHT,
    draggable: false,
    contextMenu: true,
    toolBar: true,
    keypress: true,
  });

  mind.init(mindData);
});
</script>

<template>
  <div id="map" style="width: 100%; height: 750px;" />
</template>

<style scoped>
/* 样式可以根据需要自定义 */
</style>
